<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-08 10:09:46
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-11-08 10:11:31
 * @FilePath: \web-components-box\components\ElementUI\SearchBar\index.vue
 * @Description: 搜索条件组件
-->

<script setup lang="ts">
import type { SearchBarComponent } from '@/types/component'
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  /* 是否展开搜索框 */
  expandStatus: {
    type: Boolean,
    default: false,
  },
  /* 传入的组件 */
  components: {
    type: Array as () => SearchBarComponent[],
    default: []
  }
})

const emits = defineEmits(['search'])

// 搜索条件的参数
const params = ref({})
// 是否为展开状态
const expandStatus = ref(props.expandStatus)
// 组件的宽度
const componentWidth = ref()
// 剩余可用区域宽度
const usableWidth = ref()
// 条件组件宽度
const width = ref(0)

// 获取搜索框组件的宽度
const getSearchBarWidth = () => {
  var mySearchBar = document.getElementById('mySearchBar')
  if (mySearchBar) {
    componentWidth.value = mySearchBar.clientWidth
    getComponentUsableWidth()
  }
}

// 获取搜索框组件内容区域剩余可用区域的宽度
const getComponentUsableWidth = () => {
  if (componentWidth.value) {
    if (!expandStatus.value) {
      // 概览状态的搜索栏
      usableWidth.value = componentWidth.value - 4 - 16 - 80 - 16 -52 - 20 // 去除间隙和按钮宽度
    } else {
      // 展开状态下的搜索栏
      usableWidth.value = componentWidth.value - 40 + 16 // 去除两边间隙
    }
  }
  getComponentsWidth()
}

// 获取传入组件宽度
const getComponentsWidth = () => {
  width.value = (usableWidth.value - 16 * 4)/4
}

// 清空搜索条件
const clearAllConditions = () => {
  Object.keys(params.value).forEach((key: string) => {
    params.value[key] = undefined
  })
  emits('search', params.value)
}

// 搜索
const searchEvent = () => {
  emits('search', params.value)
}

watch(
  () => props.components,
  () => {
    if (props.components.length > 0) {
      // 当前预排列的组件所占据的实际宽度
      let realComponentsWidth = 0
      props.components.forEach((component: SearchBarComponent, index: number) => {
        if (component.key) {
          params.value[component.key] = undefined
        }
        // 计算 当前预排列的组件所占据的实际宽度
        if (component.type === 0) {
          // 输入框，默认240px
          realComponentsWidth += component.width ?? 240
        } else if (component.type === 1) {
          // 下拉选择器，默认200px
          realComponentsWidth += component.width ?? 200
        } else if (component.type === 2) {
          // 日期选择器，默认320px
          realComponentsWidth += component.width ?? 320
        }
      })
    }
  }, {
    immediate: true
  }
)

watch(
  () => expandStatus.value,
  () => {
    getComponentUsableWidth()
  }, {
    immediate: true
  }
)

onMounted(() => {
  getSearchBarWidth()
  // 浏览器缩放事件
  window.addEventListener('resize', function() {
    getSearchBarWidth()
  });
})
</script>

<template>
  <div id="mySearchBar" :class="{ 'search-bar-expand': expandStatus,'search-bar-abstract': !expandStatus }">
    <div v-if="!expandStatus" class="abstract-row">
      <div v-for="component in props.components" :key="component.key" style="margin-left: 16px;">
        <!-- 输入搜索框 -->
        <el-input
          v-if="component.type === 0"
          v-model="params[component.key]"
          :placeholder="component.placeholder ?? '请输入内容'"
          suffix-icon="Search"
          :style="{ width: `${width}px` }"
          @blur="searchEvent"
        />
        <!-- 下拉选择框 -->
        <el-select
          v-if="component.type === 1 && component.config"
          v-model="params[component.key]"
          :multiple="true"
          collapse-tags
          :placeholder="component.placeholder ?? '请选择'"
          :style="{ width: `${width}px` }"
          @change="searchEvent"
        >
          <el-option
            v-for="option in component.config.options"
            :key="option.value"
            :label="option.title"
            :value="option.value">
          </el-option>
        </el-select>
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="component.type === 2"
          v-model="params[component.key]"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :style="{ width: `${width}px` }"
          @change="searchEvent"
        >
        </el-date-picker>
      </div>
    </div>
    <div v-if="!expandStatus" class="btn-expand">
      <el-button class="abstract-clean-icon" @click="clearAllConditions()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont" width="13" height="14">
          <path d="M7 1C6.44772 1 6 1.44772 6 2V5H2.5C1.94772 5 1.5 5.44771 1.5 6V9H2.5V14C2.5 14.5523 2.94771 15 3.5 15H12.5C13.0523 15 13.5 14.5523 13.5 14V9H14.5V6C14.5 5.44771 14.0523 5 13.5 5H10V2C10 1.44772 9.55228 1 9 1H7ZM10 5H6L7.2002 5L7.2 2.2L8.8002 2.2V5L10 5ZM2.7 7.8V6.2H13.3V7.8H2.7ZM12.3 9.2V13.8H7.20022L7.20059 11.0001L6.00059 10.9999L6.00022 13.8H3.7V9.2H12.3Z" fill="#4E5969"></path>
        </svg>
        清空
      </el-button>
      <el-button class="abstract-operate-icon" icon="ArrowDown"  @click="expandStatus = !expandStatus">展开</el-button>
    </div>
    <div v-else class="container-expand">
      <div v-for="component in props.components" :key="component.key" style="margin-left: 16px;margin-top: 16px;">
        <!-- 输入搜索框 -->
        <el-input
          v-if="component.type === 0"
          v-model="params[component.key]"
          :placeholder="component.placeholder ?? '请输入内容'"
          :style="{ width: `${width}px` }"
          @blur="searchEvent"
        />
        <!-- 下拉选择框 -->
        <el-select
          v-if="component.type === 1 && component.config"
          v-model="params[component.key]"
          :multiple="true"
          collapse-tags
          :placeholder="component.placeholder ?? '请选择'"
          :style="{ width: `${width}px` }"
          @change="searchEvent"
        >
          <el-option
            v-for="option in component.config.options"
            :key="option.value"
            :label="option.title"
            :value="option.value">
          </el-option>
        </el-select>
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="component.type === 2"
          v-model="params[component.key]"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :style="{ width: `${width}px` }"
          @change="searchEvent"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button class="expand-clean-icon" @click="clearAllConditions()">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont" width="13" height="14">
            <path d="M7 1C6.44772 1 6 1.44772 6 2V5H2.5C1.94772 5 1.5 5.44771 1.5 6V9H2.5V14C2.5 14.5523 2.94771 15 3.5 15H12.5C13.0523 15 13.5 14.5523 13.5 14V9H14.5V6C14.5 5.44771 14.0523 5 13.5 5H10V2C10 1.44772 9.55228 1 9 1H7ZM10 5H6L7.2002 5L7.2 2.2L8.8002 2.2V5L10 5ZM2.7 7.8V6.2H13.3V7.8H2.7ZM12.3 9.2V13.8H7.20022L7.20059 11.0001L6.00059 10.9999L6.00022 13.8H3.7V9.2H12.3Z" fill="#4E5969"></path>
          </svg>
          清空
        </el-button>
        <el-button class="expand-operate-icon" icon="ArrowUp"  @click="expandStatus = !expandStatus">收起</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 搜索框 */
  :deep(.el-input__inner) {
    height: 32px;
  }
  :deep(.el-input__wrapper) {
    padding: 0px 11px;
    border-radius: 4px;
  }
  /* 下拉选择框 */
  :deep(.el-select__wrapper) {
    height: 32px;
  }
  :deep(.el-select--large .el-select__wrapper) {
    min-height: 32px;
  }
  /* 日期选择器 */
  :deep(.el-range-editor--large.el-input__wrapper) {
    height: 32px;
  }

  /* 收起状态下的搜索框 */
  .search-bar-abstract {
    height: 64px;
    width: 100%;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr auto; /* 左侧自动扩展，右侧自适应 */
    align-items: center; /* 垂直居中 */
  }
  /* 摘要内容 */
  .abstract-row {
    margin-left: 4px;
    margin-right: 8px;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }
  /* 展开按钮 */
  .btn-expand {
    grid-column: 2; /* 将子组件放置在第二列 */
    margin-right: 20px;
    margin-left: 8px;
  }

  /* 展开状态下的搜索框 */
  .search-bar-expand {
    height: auto;
    min-height: 164px;
    width: 100%;
    border-radius: 4px;
  }
  /* 展开状态下搜索框中显示内容的区域 */
  .container-expand {
    display: flex;
    flex-wrap: wrap;
    margin-left: 4px;
  }
  /* 按钮样式 */
  :deep(.el-button--large) {
    height: 32px;
    padding: 0px;
    border-radius: 0px;
    border: 0px;
    color: #165DFF;
  }
  .abstract-clean-icon {
    width: 80px;
    height: 32px;
    color: #4E5969;
    border: 1px solid #E5E6EB;
    margin-right: 4px;
  }
  .expand-clean-icon {
    width: 80px;
    height: 32px;
    color: #4E5969;
    border: 1px solid #E5E6EB;
    margin-right: 4px;
    margin-left: 16px;
    margin-top: 16px;
  }
  .abstract-operate-icon {
    width: 52px;
    height: 32px;
  }
  .expand-operate-icon {
    width: 52px;
    height: 32px;
    margin-top: 16px;
  }
  /* 清空按钮的svg图标 */
  .design-iconfont {
    margin-right: 5.5px;
  }
</style>